<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <title v-text="'赛事数据排行-'+matchInfo.name"></title>
        <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/competition.css?v=1"/>
        <script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
        <script src="{$staticHost}/static/js/vue.min.js"></script> 
    </head>
        <body v-bind:class="{'style-two':matchInfo.template_id==1,'style-three':matchInfo.template_id==2}">
        <!-- 空白页 -->
        <section v-if="empty" id="empty" class="empty-box" style="display:block">
            <div>
                <img src="{$staticHost}/static/images/bg/image2_03-min.png" >
                <p>数据空空，快去跑步吧，小心变胖胖</p>
            </div>
        </section>
        <div v-else>
        <div class="banner">
            <img v-bind:src="matchInfo.banner_src" />
        </div>
        <div v-if="user_score">
        <h3 class="c-expalain"><span>我的数据</span></h3>
        <ul class="data-rank">
            <li>
              <div class="mt10" v-if="matchInfo.user_tabs.indexOf('0')!=-1">
              累计里程<br>
              <b>{{user_score.total_mileage}}km</b>
              </div>
              
              <div class="mt10" v-if="matchInfo.user_tabs.indexOf('1')!=-1">
              累计用时<br>
              <b>{{user_score.total_elapsedtime | seconds2string}}</b>
              </div>
              
              <div class="mt10" v-if="matchInfo.user_tabs.indexOf('2')!=-1">
              单次最远里程<br>
              <b>{{user_score.best_elapsedtime}}km</b>
              </div>
              
              <div class="mt10" v-if="matchInfo.user_tabs.indexOf('3')!=-1">
              单次最长用时<br>
              <b>{{user_score.best_elapsedtime | seconds2string}}</b>
              </div>
              
              <div class="mt10" v-if="matchInfo.user_tabs.indexOf('4')!=-1">
              累计天数<br>
              <b>{{user_score.dabiao_days}}天</b>
              </div>
            </li>
        </ul>
        </div>
        <!--数据-->
        <h3 class="c-expalain"><span>排行榜</span></h3>
        <section class="rank-mileage rank-cut">
            <h6 class="all" v-if="rank.user_rank && rank.group_rank">
                <a id="tone" v-bind:class="{'line':menu1==0}" v-on:click="clickMenu1(0)">个人排行</a>
                <a id="tgroup" v-bind:class="{'line':menu1==1}" v-on:click="clickMenu1(1)">群组排行</a>
            </h6>
            <div id="one" class="ul-list" v-show="menu1==0">
                <h6 class="tab-title">
                    <a v-bind:class="{'line':menu2==0}" v-on:click="clickMenu2(0)" v-if="matchInfo.user_tabs.indexOf('0')!=-1">总里程</a>
                    <a v-bind:class="{'line':menu2==1}" v-on:click="clickMenu2(1)" v-if="matchInfo.user_tabs.indexOf('1')!=-1">总时长</a>
                    <a v-bind:class="{'line':menu2==2}" v-on:click="clickMenu2(2)" v-if="matchInfo.user_tabs.indexOf('2')!=-1">单次里程</a>
                    <a v-bind:class="{'line':menu2==3}" v-on:click="clickMenu2(3)" v-if="matchInfo.user_tabs.indexOf('3')!=-1">单次时长</a>
                    <a v-bind:class="{'line':menu2==4}" v-on:click="clickMenu2(4)" v-if="matchInfo.user_tabs.indexOf('4')!=-1">打卡天数</a>
                </h6>
                <ul class="list-01 all-mileage" v-show="menu2==0">
                    <li v-for="(index,data) in rank.user_rank.total_mileage">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.nickname"></span>
                        <span v-text="data.total_mileage+'km'"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 all-time" v-show="menu2==1">
                    <li v-for="(index,data) in rank.user_rank.total_elapsedtime">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.nickname"></span>
                        <span v-text="data.total_elapsedtime | seconds2string"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 one-mileage" v-show="menu2==2">
                    <li v-for="(index,data) in rank.user_rank.best_mileage">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.nickname"></span>
                        <span v-text="data.best_mileage+'km'"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 one-time" v-show="menu2==3">
                    <li v-for="(index,data) in rank.user_rank.best_elapsedtime">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.nickname"></span>
                        <span v-text="data.best_elapsedtime | seconds2string"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 one-time" v-show="menu2==4">
                    <li v-for="(index,data) in rank.user_rank.dabiao_days">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.nickname"></span>
                        <span v-text="data.dabiao_days+'天'"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
            </div>
            <div id="group" class="ul-lista" v-show="this.menu1==1">
                <h6 class="tab-titlea">
                    <a v-bind:class="{'line':menu3==0}" v-on:click="clickMenu3(0)" v-if="matchInfo.user_tabs.indexOf('0')!=-1">总里程</a>
                    <a v-bind:class="{'line':menu3==1}" v-on:click="clickMenu3(1)" v-if="matchInfo.user_tabs.indexOf('1')!=-1">总时长</a>
                    <a v-bind:class="{'line':menu3==2}" v-on:click="clickMenu3(2)" v-if="matchInfo.user_tabs.indexOf('2')!=-1">单次里程</a>
                    <a v-bind:class="{'line':menu3==3}" v-on:click="clickMenu3(3)" v-if="matchInfo.user_tabs.indexOf('3')!=-1">单次时长</a>
                </h6>
                <ul class="list-01 all-mileage" v-show="menu3==0">
                    <li v-for="(index,data) in rank.group_rank.total_mileage">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="{'ico-crown-2':index==0,'ico-crown-3':index==1,'ico-crown-4':index==2"></i>
                        </span>
                        <span v-text="data.name"></span>
                        <span v-text="data.total_mileage+'km'"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 all-time" v-show="menu3==1">
                    <li v-for="(index,data) in rank.group_rank.total_elapsedtime">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.name"></span>
                        <span v-text="data.total_elapsedtime | seconds2string"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 one-mileage" v-show="menu3==2">
                    <li v-for="(index,data) in rank.group_rank.best_mileage">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.name"></span>
                        <span v-text="data.best_mileage+'km'"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
                <ul class="list-01 one-time" v-show="menu3==3">
                    <li v-for="(index,data) in rank.group_rank.best_elapsedtime">
                        <span>
                            <img v-bind:src="data.header?data.header:'/static/images/bg/group_image_nor-min.png'" />
                            <i v-bind:class="[index==0?'ico-crown-2':'',index==1?'ico-crowny-3':'',index==2?'ico-crownt-4':'']"></i>
                        </span>
                        <span v-text="data.name"></span>
                        <span v-text="data.best_elapsedtime | seconds2string"></span>
                        <em v-text="index+1"></em>
                    </li>
                </ul>
            </div>
        </section>
        </div>
        
        <p class="p10 ac color_gray f13">
            本活动最终解释权归虎扑跑步所有
        </p>
        <a class="dow-app color-blue" href="http://mobile.hupu.com/download/joggers?r=share">
            下载虎扑跑步APP参加 精彩活动
        </a>
    </body>
    
<script type="text/javascript">
    var match_id = "{$match_id}";
    var sup = typeof jw === "object";
        if(sup){
                $(".dow-app").hide();
            }
    Vue.filter('seconds2string',function(value){
        var second = parseInt(value)
        var minute = 0
        var hour = 0
        if(second > 60){
            minute = parseInt(second/60)
            second = parseInt(second%60)
            if(minute > 60){
                hour = parseInt(minute/60)
                minute = parseInt(minute%60)
            }
        }
        var result = ""+second+"秒"
        if(minute){
            result = ""+minute+"分"+result
        }
        if(hour){
            result = ""+hour+"小时"+result
        }
        return result
    })
    new Vue({
        el: 'html',
        data: {
            matchInfo:{},
            rank:{},
            user_score:{},
            menu1: 0,
            menu2: 0,
            menu3: 0
        },
        computed: {
            empty: function(){
                var user_rank = this.rank.user_rank
                if(user_rank && (user_rank.total_mileage.length || user_rank.total_elapsedtime.length || user_rank.best_mileage.length || user_rank.best_elapsedtime.length || user_rank.dabiao_days.length)){
                    return false
                }
                var group_rank = this.rank.group_rank
                if(group_rank && (group_rank.total_mileage.length || group_rank.total_elapsedtime.length || group_rank.best_mileage.length || group_rank.best_elapsedtime.length)){
                    return false
                }
                return true
            }
        },
        created: function(){
            var self = this
            $.getJSON('{$staticHost}/matchWeb/rank', {match_id:match_id}, function(data, error) {
                self.matchInfo = data.result.matchInfo
                self.rank = data.result.rank
                self.user_score = data.result.user_score
                if(!self.rank.user_rank){
                    self.menu1 = 1
                }
            });
        },
        methods: {
            clickMenu1: function(id){
                this.menu1 = id
            },
            clickMenu2: function(id){
                this.menu2 = id
            },
            clickMenu3: function(id){
                this.menu3 = id
            }
        }
        
    })
</script>
{template 'show/web-footer'}